사이트 내 전체검색
[스크립트] 자바스크립트 복수 게시물 더보기/접기(more/less)
로빈아빠
https://cmd.kr/javascript/163 URL이 복사되었습니다.

본문

자바스크립트로 만든 더보기/접기(more/less)  소스입니다. 본 소스는 여러개의 게시물 중에 지정된 제한 높이 보다 긴 게시물만 더보기/접기 버튼을 일괄적으로 붙여주고 있습니다. 게시물 샘플 중에는 이미지가 포함된 것도 있고 플래시가 포함된 것도 있습니다. 구현 원리는 레이어 속성 중에 offsetHeight 속성으로 해당 레이어의 높이를 확인할 수 있고 이와 제한 높이를 비교해서 제한 높이 이외의 내용은 숨겨주고 바로 밑에 더보기 버튼을 붙여 주는 것입니다. 이는 서버 스크립트와 조합해서 블로그나 게시판에 적용해볼 수 있습니다. 이를 체험할 수 있는 하단에 제시된 HTML 소스의 실행화면은 아래 링크를 통해 확인할 수 있습니다. 자바스크립트 입문자 여러분들은 본 소스를 자신에 맞게 수정 개선해보시면 자바스크립트 학습에 도움이 될 것입니다.

[실행화면 확인 링크]
http://www.hompydesign.com/javascript/more/more_less.html

[더보기/접기 HTML 소스]
<HTML>
<HEAD>
<TITLE>More/Less TEST</TITLE>
<script type='text/javascript'>
<!--
var content_height = 112;
var content_idx_array = [1001,1002,1004,1005,1008];
var content_show_array = [];
var content_push_array = [];
for (i=0;i<content_idx_array.length;i++) {
    content_show_array[content_idx_array[i]] = 'div_show_' + content_idx_array[i];
    content_push_array[content_idx_array[i]] = 'div_push_' + content_idx_array[i];
}
function get_more_html(idx){
    return "<a href=\"javascript:print_more('"+idx+"')\">--- [더보기] ---</a>";
}
function get_less_html(idx){
    return "<a href=\"javascript:print_less('"+idx+"')\">--- [접기] ---</a>";
}
function print_less(idx){
    sobj = document.getElementById(content_show_array[idx]);
    pobj = document.getElementById(content_push_array[idx]);
    if (sobj) {
        sobj.style.height=content_height+'px';
        pobj.innerHTML = get_more_html(idx);
    }
}
function print_more(idx){
    sobj = document.getElementById(content_show_array[idx]);
    pobj = document.getElementById(content_push_array[idx]);
    if (sobj) {
        sobj.style.height='';
        pobj.innerHTML = get_less_html(idx);
    }
}
function init_more_less(){
    var i, max=content_idx_array.length;
    for (i=0;i<max;i++) {
        sobj = document.getElementById(content_show_array[content_idx_array[i]]);
        pobj = document.getElementById(content_push_array[content_idx_array[i]]);
        if (sobj && parseInt(sobj.offsetHeight)>content_height) {
            sobj.style.height=content_height+'px';
            pobj.innerHTML = get_more_html(content_idx_array[i]);
        }
    }
}
function onload_event(){
    init_more_less();
}
if (window.attachEvent) window.attachEvent('onload', onload_event);
else if (window.addEventListener) window.addEventListener('load', onload_event, false);
-->
</script>
<style>
div{margin:0; padding:0;}
body {font-family:Dotum, tahoma, sans-serif; font-size:12px;}
.my_title {font-weight:bold; margin-top:20px;}
.my_show {width:460px; overflow:hidden; word-wrap: break-word; word-break:break-all;}
.my_push {font-size:11px; margin-top:4px;}
a:link {color:blue; text-decoration:none; }
a:visited {color:blue; text-decoration:none;}
a:hover {color:blue; text-decoration:underline;}
</style>
</HEAD>
<BODY>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/517" target="_blank">위자드팩토리 위젯으로 블로그를 토핑해볼까?</a></div>
<div id="div_show_1001" class="my_show">
몇일전 위자드웍스에 의해 런칭한 위자드 팩토리에 있는 이쁜 위젯들로 블로그를 토핑해보면 어떨까요? 막 오픈한 서비스라서 선택할 수 있는 위젯의 폭이 아직은 좁은 편이나 좀더 쉽고 좀더 간편하게 사용할 수 있도록 구성한 유저 인터페이스와 아기자기한 디자인이 돋보입니다.<br>
<img src="http://hompy.info/attach/1/1182021495.jpg"><br>
유저가 직접 위젯을 제작할 수 있도록 이미 공개되었고 이번에 추가 버전업 된 오픈API도 제공하고 있으니 유저가 손수 만들어서 올릴 수 있습니다. 이렇게 만들어진 공개된 위젯은 위자드 팩토리에 의해 다양한 채널로 배포될 수 있습니다. 앞으로 퍼가고 싶은 다양하고 개성있는 위젯들이 얼마나 많이 진열될 것이냐에 따라 위젯공장의 역할을 할 수 있을지 여부가 결정될 것 같습니다. 위젯공장에 있는 눈에 띄는 시계,날씨,아기 위젯과 이번에 추천 블로그 선정으로 위젯공장에 등록된 제 블로그 RSS피드 위젯을 띄워봅니다.
</div>
<div id="div_push_1001" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/516" target="_blank">뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어</a></div>
<div id="div_show_1002" class="my_show">
기자나 블로거들이 뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어라는 홈페이지가 있습니다. 2004년에 오픈한 이 서비스를 이용하는 기자분들이 많은 것으로 알고 있고 또한 기업이나 정부,기관,단체 입장에서 보면 홍보할 수 있는 채널로 활용될 수 있어 홍보나 마케팅에 관여하는 분들이 이 서비스를 많이 이용하고 있기도 합니다. 네이버 백과사전으로 검색해 보면 아래와 같은 소개가 나오는군요.
</div>
<div id="div_push_1002" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/515" target="_blank">위젯 공유 서비스 위자드 팩토리 런칭 파티 후기</a></div>
<div id="div_show_1004" class="my_show">
저번에 위자드닷컴 추천 블로그로 선정되어 VIP(?) 초대장을 받고 어제 위젯 공유 서비스 위자드 팩토리 런칭 파티에 놀러 갔었습니다. 개인적으로 플래시 위젯 만드는 일이 취미이기도 하고 몇년 전 표철민 대표님과 메시지를 교환한 인연도 있었고 이번에 선정된 추천 블로거들도 만나볼려고 겸사겸사 퇴근하고 연세대 공학원에 마련된 행사장으로 직행했습니다. "1부, 위자드 팩토리 소개 및 시연회"에선 라면 이야기와 하루 2시간 자며 만들었다는 이야기가 인상적이었습니다. 위자드 웍스에 대한 자세한 회사 소개와 위자드 팩토리에 대한 간단한 소개를 들을 수 있었습니다. 1부는 식사 시간을 많이 늦출 수 없는 이유로 간소하게 진행된 것 같습니다. 위자드웍스가 어떤 일에 애정을 쏟고 있는 지 알 수 있게 되었고 앞으로 위젯 관련해서 어떤 일들이 벌어질 지 예측할 수 있는 시간이었습니다. "2부, 후원사들과 함께 하는 신나는 파티"에서는 깔끔한 식단의 뷔페식 식사 시간이 있었고 위젯을 내장한 흑맥주를 마시며 스텐딩 파티 형태의 참가자들 간 만남의 시간이 있었습니다. 예상 만큼 많은 블로거들과 인사를 나누지 못했고 위젯 관련해서 많은 정보를 교환하지 못해 아쉬운 부분이 있었습니다. 앞으로 또 다른 이름의 행사로 그 아쉬움을 채울 수 있는 기회가 만들어 질 것이라 기대하며 행사장을 빠져나왔습니다. 빠져나오는 중에 명찰을 반납하고 나니 "웹 패러다임을 바꾸는 위젯" 이라는 책이 포함된 선물을 한 보따리 주시더군요. 받은 선물을 들고 귀가 하느라 팔이 빠지는 줄 알았습니다.^^ 선물 감사했습니다.
위자드웍스 임직원 여러분들이 마련한 뜻 깊은 행사 즐거웠습니다. 앞으로 위자드웍스가 끊임없는 발전을 해서 위젯 업계의 부흥기를 이끌어갈 수 있기를 바라며 언제나 블로거들에게 사랑 받는 기업이 되주시길 바랍니다. 위하여!!!
</div>
<div id="div_push_1004" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/514" target="_blank">전문직 직장인들이 함께하는 가을 축제가 있습니다.</a></div>
<div id="div_show_1005" class="my_show">
2008년 11월 1일에 전문직 직장인들과 함께하는 링크나우 가을 축제가 있습니다. 대학가요제 입상 경력이 있는 직장인 밴드와 가수들의 공연도 즐길 수 있고 노래와 춤 그리고 연주가 있는 직장인들의 장기자랑도 보며 즐거운 시간 가질 수 있게 될겁니다. 상품도 있다고 하니 장기자랑에 참여해보는 것도 좋겠지요. 더불어 부페 식사도 하고 맥주도 마시며 만남과 교류의 시간도 가질 수 있습니다. 행사명은 "링크나우 가을 페스티벌-음악과 만남의 밤"이고 최대 참석인원은 200명이군요. 행사 예약 페이지를 보시면 자세한 행사 내용과 어떤 분들이 참가하는 지 확인할 수 있습니다. 일정이 맞는 분들은 부담없이 참여해봐도 좋겠습니다.
</div>
<div id="div_push_1005" class="my_push"></div>

<div id="div_title_1001" class="my_title"><a href="http://hompy.info/513" target="_blank">플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #2</a></div>
<div id="div_show_1008" class="my_show">
플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 두번째 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다.<br>
<EMBED pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.hompydesign.com/club/blogchat.swf" width="190" height="200" type="application/x-shockwave-flash" quality="high" wmode="transparent"></EMBED><br>
아래 예제 처럼 LoadVars 객체를 이용해서 통신을 하는 것이 먼저 소개해드렸던 XML 객체를 이용하는 것 보다는 좀더 손쉽게 사용될 수 있습니다. 그러나 전달해야할 데이터가 복잡한 구조를 가질 경우 XML 객체를 이용하는 것 보다 혼란스러울 수 있으며 눈으로 손쉽게 데이터를 해석하기 어려울 수 있습니다. 아래 제공하는 샘플 소스 코드를 필요에 맞게 수정하고 개선해보면 어떻게 사용하는 것인지 이해하기 쉽습니다. 잘 익혀두었다가 사용자의 데이터를 등록하고 갱신하는 응용 프로그램 모양의 플래시를 만드는데 활용해보세요.
</div>
<div id="div_push_1008" class="my_push"></div>
</BODY>
</HTML>

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info
--------------------------------
exam

위자드팩토리 위젯으로 블로그를 토핑해볼까?
몇일전 위자드웍스에 의해 런칭한 위자드 팩토리에 있는 이쁜 위젯들로 블로그를 토핑해보면 어떨까요? 막 오픈한 서비스라서 선택할 수 있는 위젯의 폭이 아직은 좁은 편이나 좀더 쉽고 좀더 간편하게 사용할 수 있도록 구성한 유저 인터페이스와 아기자기한 디자인이 돋보입니다.
1182021495.jpg
유저가 직접 위젯을 제작할 수 있도록 이미 공개되었고 이번에 추가 버전업 된 오픈API도 제공하고 있으니 유저가 손수 만들어서 올릴 수 있습니다. 이렇게 만들어진 공개된 위젯은 위자드 팩토리에 의해 다양한 채널로 배포될 수 있습니다. 앞으로 퍼가고 싶은 다양하고 개성있는 위젯들이 얼마나 많이 진열될 것이냐에 따라 위젯공장의 역할을 할 수 있을지 여부가 결정될 것 같습니다. 위젯공장에 있는 눈에 띄는 시계,날씨,아기 위젯과 이번에 추천 블로그 선정으로 위젯공장에 등록된 제 블로그 RSS피드 위젯을 띄워봅니다.
기자나 블로거들이 뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어라는 홈페이지가 있습니다. 2004년에 오픈한 이 서비스를 이용하는 기자분들이 많은 것으로 알고 있고 또한 기업이나 정부,기관,단체 입장에서 보면 홍보할 수 있는 채널로 활용될 수 있어 홍보나 마케팅에 관여하는 분들이 이 서비스를 많이 이용하고 있기도 합니다. 네이버 백과사전으로 검색해 보면 아래와 같은 소개가 나오는군요.
저번에 위자드닷컴 추천 블로그로 선정되어 VIP(?) 초대장을 받고 어제 위젯 공유 서비스 위자드 팩토리 런칭 파티에 놀러 갔었습니다. 개인적으로 플래시 위젯 만드는 일이 취미이기도 하고 몇년 전 표철민 대표님과 메시지를 교환한 인연도 있었고 이번에 선정된 추천 블로거들도 만나볼려고 겸사겸사 퇴근하고 연세대 공학원에 마련된 행사장으로 직행했습니다. "1부, 위자드 팩토리 소개 및 시연회"에선 라면 이야기와 하루 2시간 자며 만들었다는 이야기가 인상적이었습니다. 위자드 웍스에 대한 자세한 회사 소개와 위자드 팩토리에 대한 간단한 소개를 들을 수 있었습니다. 1부는 식사 시간을 많이 늦출 수 없는 이유로 간소하게 진행된 것 같습니다. 위자드웍스가 어떤 일에 애정을 쏟고 있는 지 알 수 있게 되었고 앞으로 위젯 관련해서 어떤 일들이 벌어질 지 예측할 수 있는 시간이었습니다. "2부, 후원사들과 함께 하는 신나는 파티"에서는 깔끔한 식단의 뷔페식 식사 시간이 있었고 위젯을 내장한 흑맥주를 마시며 스텐딩 파티 형태의 참가자들 간 만남의 시간이 있었습니다. 예상 만큼 많은 블로거들과 인사를 나누지 못했고 위젯 관련해서 많은 정보를 교환하지 못해 아쉬운 부분이 있었습니다. 앞으로 또 다른 이름의 행사로 그 아쉬움을 채울 수 있는 기회가 만들어 질 것이라 기대하며 행사장을 빠져나왔습니다. 빠져나오는 중에 명찰을 반납하고 나니 "웹 패러다임을 바꾸는 위젯" 이라는 책이 포함된 선물을 한 보따리 주시더군요. 받은 선물을 들고 귀가 하느라 팔이 빠지는 줄 알았습니다.^^ 선물 감사했습니다. 위자드웍스 임직원 여러분들이 마련한 뜻 깊은 행사 즐거웠습니다. 앞으로 위자드웍스가 끊임없는 발전을 해서 위젯 업계의 부흥기를 이끌어갈 수 있기를 바라며 언제나 블로거들에게 사랑 받는 기업이 되주시길 바랍니다. 위하여!!!
2008년 11월 1일에 전문직 직장인들과 함께하는 링크나우 가을 축제가 있습니다. 대학가요제 입상 경력이 있는 직장인 밴드와 가수들의 공연도 즐길 수 있고 노래와 춤 그리고 연주가 있는 직장인들의 장기자랑도 보며 즐거운 시간 가질 수 있게 될겁니다. 상품도 있다고 하니 장기자랑에 참여해보는 것도 좋겠지요. 더불어 부페 식사도 하고 맥주도 마시며 만남과 교류의 시간도 가질 수 있습니다. 행사명은 "링크나우 가을 페스티벌-음악과 만남의 밤"이고 최대 참석인원은 200명이군요. 행사 예약 페이지를 보시면 자세한 행사 내용과 어떤 분들이 참가하는 지 확인할 수 있습니다. 일정이 맞는 분들은 부담없이 참여해봐도 좋겠습니다.
플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 두번째 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다.

아래 예제 처럼 LoadVars 객체를 이용해서 통신을 하는 것이 먼저 소개해드렸던 XML 객체를 이용하는 것 보다는 좀더 손쉽게 사용될 수 있습니다. 그러나 전달해야할 데이터가 복잡한 구조를 가질 경우 XML 객체를 이용하는 것 보다 혼란스러울 수 있으며 눈으로 손쉽게 데이터를 해석하기 어려울 수 있습니다. 아래 제공하는 샘플 소스 코드를 필요에 맞게 수정하고 개선해보면 어떻게 사용하는 것인지 이해하기 쉽습니다. 잘 익혀두었다가 사용자의 데이터를 등록하고 갱신하는 응용 프로그램 모양의 플래시를 만드는데 활용해보세요.

댓글목록

등록된 댓글이 없습니다.

831 (17/17P)

Search

Copyright © Cmd 명령어 18.116.42.158